<template>
	<view class="content">
		<view class="header">
			<view class="header_bg">

				<view class="tab">
					<view class="tablist" v-for="(item,index) in tablist" @click="tab(item.id)">
						<view class="tablist1"
							:style="{background:a==item.id?'#FFFFFF':'',color:a==item.id?'#2C7CF6':''}">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>


				<view class="class" v-for="(item,index) in classlist" :key="index" >
					<view class="classlist">
						<text>{{item.title}}</text>
						<image src="../../../static/school/zs.png" mode="" @click="zs(item)"></image>
					</view>
					<view class="classxl" v-show="item.state">
						<view class="classxllist" v-for="(itemen,index) in item.studentlist" :key="index">
							<view class="classxllist1">
								<text>{{itemen.title}}</text>
							</view>

							<view class="classxllist2" @click="change(itemen,index)">
								<view class="xz" :style="{background:itemen.status?'#FF6652':''}">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0,
				b:'',
				xzlist:[],
				tablist: [{
						id: 0,
						title: '转班'
					},
					{
						id: 1,
						title: '毕业'
					}
				],


				classlist: [{
						id: 0,
						title: 'A年级 A班 17人',
						state: false,
						studentlist: [{
								status: false,
								title: 'A学生 家长名称 联系方式'
							},
							{
								status: false,
								title: 'A学生 家长名称 联系方式'
							},
							{
								status: false,
								title: 'A学生 家长名称 联系方式'
							}
						]
					},
					{
						id: 1,
						title: 'A年级 A班 17人',
						state: false,
						studentlist: [{
								status: false,
								title: 'A学生 家长名称 联系方式'
							},
							{
								status: false,
								title: 'A学生 家长名称 联系方式'
							},
							{
								status: false,
								title: '1'
							}
						]
					}
				]
			}
		},
		methods: {
			tab(id) {
				this.a = id
				console.log(this.a)
			},
			zs(item) {
				item.state = !item.state
			},
			change(itemen,index) {
				itemen.status=!itemen.status
				// console.log(itemen)
				
				// let iii =this.xzlist.indexOf(itemen.id)
				// if(iii == -1){
				// 	this.xzlist.push(itemen.title)
				// 	console.log(this.xzlist)
				// 	console.log(iii)
				// }else{
				// 	this.xzlist.splice(iii,1)
				// }
				// if(itemen.status==true){
				// 	console.log(itemen)
				// 	itemen.status==false
				// 	for(var i=0; i < this.xzlist.length; i++){
				// 		if(this.xzlist[i] === itemen[index].title){
				// 			this.xzlist.splice(i,'11')
				// 		}
				// 	}
				// 	this.b=this.xzlist
				// 	console.log(this.b)
				// }
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 1624rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		width: 750rpx;
		height: 240rpx;
		background: linear-gradient(180deg, #1789FF 0%, #93C3F9 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header_bg {
		padding-top: 32rpx;
	}

	.tab {
		width: 690rpx;
		height: 96rpx;
		background: #F3F3F3;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: auto;
		display: flex;
	}

	.aaa {}

	.tablist {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.tablist1 {
		width: 328rpx;
		height: 80rpx;

		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #666666;
	}

	.classlist {
		width: 690rpx;
		height: 116rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		margin: 40rpx auto 0;

	}

	.classlist text {
		margin-left: 32rpx;
	}

	.classlist image {
		height: 40rpx;
		width: 40rpx;
		margin-left: auto;
		margin-right: 32rpx;
	}

	.classxl {
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #6DB5FF;
		margin: 24rpx auto 0;
	}

	.classxllist {
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 32rpx;
		padding-bottom: 16rpx;
		border-bottom: 2px solid #F0F0F0;
		display: flex;
	}

	.classxllist1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.classxllist2 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;

	}

	.xz {
		
		width: 24rpx;
		height: 24rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

	}
	.fz{
		background: #FF6652;
		width: 24rpx;
		height: 24rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>